/*
  React生命周期
  三大阶段：挂载时、更新时、卸载时
  挂载时 等同于Vue中的创建和挂载二合一
  constructor 代表创建时 1. 初始化state  2. 创建Ref等
  render 表示渲染什么内容，每次组件渲染都会触发 渲染UI
  componentDidMount 组件挂载(完成DOM渲染后)  1. 发送网络请求   2.DOM操作
 */

import React from 'react';
import ReactDom from 'react-dom/client';

class Handler extends React.Component {
  constructor() {
    super();
    console.log('创建前后----->');
  }
  state = {
    count: 10000,
  };
  componentDidMount() {
    console.log('组件挂载，完成DOM渲染----->');
  }

  render() {
    console.log('渲染前----->');
    return (
      <div>
        <h3>{this.state.count}</h3>
      </div>
    );
  }
}

// 18版本以上新出的挂载方法
const root = ReactDom.createRoot(document.getElementById('root'));
root.render(<Handler></Handler>);
